<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!--配置了页面模板后，static是不加载路径后面的，所以这样写是访问不到的href="../static/js/element-ui/theme-chalk/index.css"-->
    <!--或者用模板的格式导入js和css，如thymeleaf是@{}-->
    <link rel="stylesheet" href="js/element-ui/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form ref="form" :model="form">
        <el-row type="flex" justify="center" align="middle">
            <img src="img/login.png" style="width: 100px;">
        </el-row>
        <el-row type="flex" justify="center" align="middle">
            <el-col :span="8"  style="text-align: center">
                <el-form-item label="账号">
                    <el-input
                        placeholder="请输入账号"
                        v-model="form.username"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input
                        placeholder="请输入密码"
                        v-model="form.password"
                        type="password"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-row type="flex" justify="start" align="middle">
                    <el-form-item label="记住我">
                        <el-switch v-model="form.rememberMe"
                                   active-value="true"
                                   inactive-value="false"
                        >
                        </el-switch>
                    </el-form-item>
                </el-row>
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="reset">清空</el-button>
            </el-col>
        </el-row>
    </el-form>
</div>
<script src="js/vue/vue.js"></script>
<script src="js/element-ui/index.js"></script>
<script src="js/jquery/jquery-3.3.1.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            form: {
                username: "admin",
                password: "1",
                rememberMe: false
            }
        },
        methods: {
            login:function () {
                var _this = this;
                $.ajax({
                    url: '/user/login',
                    data: _this.form,
                    type: 'post',
                    success: function (res) {
                        console.log(res);
                        if(res.code == 0){
                            location.href='/index';
                        }else{
                            _this.$message(res.msg);
                        }
                    },
                    error: function (res) {
                        console.log(res)
                    }
                });
            },
            reset: function () {
                this.form.username = '';
                this.form.password = '';
            },
            center:function () {
                var divHeight = $('#app').height();
                var windowHeight = $(window).height();
                $('#app').css('margin-top',(windowHeight - divHeight)/2);
            }
        },
        mounted:function () {
            this.center();
        }
    });
</script>
</body>
</html>